<template>
  <div>
    <Banner></Banner>
    <el-row class="p_10">
      <el-col
        :span="20"
        :offset="2"
        v-for="(items, indexs) in storelist"
        :key="indexs"
        class="p_10"
      >
        <el-row style="text-align: start">
          <el-col :span="3" style="min-height: 50px">{{
            items.catOneName
          }}</el-col>
          <el-col :span="2" :offset="19" style="min-height: 50px"
            ><el-button type="text" @click="handleShowMore(items.catOneId)"
              >显示更多</el-button
            ></el-col
          >
        </el-row>
        <el-row type="flex" justify="space-around" class="row_ml">
          <el-col
            :xs="{ span: 6, offset: 0 }"
            :md="{ span: 4, offset: 0 }"
            v-for="(item, index) in items.list.goods"
            :key="index"
            class="elcolcla"
          >
            <router-link
              :to="{
                path: '/details',
                query: { productID: item.goods_id },
              }"
            >
              <div class="grid-content bg_white pd_10">
                <!-- <div class="g_type">新品</div> -->
                <div style="text-align: center">
                  <img
                    class="g_img"
                    :src="$target + '/sharePath/' + item.pics[0].pic"
                    alt=""
                  />
                </div>
                <span class="g_title">{{ item.goods_name }}</span
                ><br />
                <span class="g_gold">￥{{ item.goods_price }}</span>
              </div>
            </router-link>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Banner from "@/components/Banner.vue";
export default {
  name: "",
  data() {
    return {
      storelist: [],
    };
  },
  components: {
    Banner,
    // MyList,
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleShowMore(val) {
      this.$router.push({ path: "/myList", query: { catId: val } });
      this.$router.go(0);
    },
    getGoodsList() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)",
      });
      this.$axios
        .get("cateOneList", {})
        .then((res) => {
          if (res.data.meta.status !== 200) {
            loading.close();
            return this.$message.error("获取商品列表失败！");
          }
          var goodsData = res.data.data;
          goodsData.forEach((element) => {
            let max = 5;
            let list = [];
            if (element.list.goods.length < max) {
              max = element.list.goods.length;
            }
            for (let index = 0; index < max; index++) {
              list.push(element.list.goods[index]);
            }
            element.list.goods = list;
          });
          loading.close();
          this.storelist = goodsData;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getGoodsList();
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: #000;
}
.p_10 {
  padding: 2rem 0px;
}
.pd_10 {
  padding-bottom: 10px;
}
.elcolcla {
  border-radius: 4px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  z-index: 1;
  min-height: 100px;
}
.elcolcla:hover {
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}
.el-col {
  min-height: 180px;
}
.bg_white {
  background-color: white;
}
.grid-content {
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.row-bg {
  background-color: #f9fafc;
}
.g_img {
  height: 8rem;
  width: 65%;
  margin: 20px 0px;
}
.g_type {
  width: 90px;
  height: 25px;
  line-height: 25px;
  color: #f9fafc;
  font-size: 15px;
  background-color: rgb(86, 194, 83);
}
.g_title {
  font-size: 15px;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>